<template>
<div class="parent">
    <div class="debug">
        <div>x:<span id="x"></span></div>
        <div>y:<span id="y"></span></div>
        <div>z:<span id="z"></span></div>
    </div>
    <div id="container"></div>
</div>
</template>
<script setup lang="ts"> 
import * as THREE from 'three';
import * as VUE from 'vue';

VUE.onMounted(()=>{ 
    const renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container')?.appendChild(renderer.domElement);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 20;

    const scene = new THREE.Scene();
    const sphereGeometry = new THREE.SphereGeometry(5);
        const sphereMaterial = new THREE.MeshBasicMaterial({
            color: 0xff00ff,
            wireframe: false
        });
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        scene.add(sphere);

    function resizeRendererToDisplaySize(renderer:THREE.WebGLRenderer) {
        const canvas = renderer.domElement;
        const width = canvas.clientWidth;
        const height = canvas.clientHeight;
        const needResize = canvas.width !== width || canvas.height !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;
    }

    const elx = document.querySelector('#x');
    const ely = document.querySelector('#y');
    const elz = document.querySelector('#z');

    function render(time:number) {
        time *= 0.001;
        if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();
        }

        sphere.position.set(
			Math.sin( time * 1.2 ) * 5,
			Math.sin( time * 1.1 ) * 5,
			Math.sin( time * 1.3 ) * 10,
		);
        if (elx)elx.textContent = sphere.position.x.toFixed(3);
        if(ely)ely.textContent = sphere.position.y.toFixed(3);
        if(elz)elz.textContent = sphere.position.z.toFixed(3);

        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);

});


</script>

<style scoped>
.parent {
    width: 100vw;
    height: 100vh;
    position: relative;
}
.parent > * {
    position: absolute;
}

.debug {
    color: white;
    z-index: 10;
} 
</style>